<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram - Trolley on Springs</title>
</head>
<body>

<canvas id="canvas" width="600" height="380"></canvas>

<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    /**
     * Draws a spring as a series of semi-circles.
     * @param {CanvasRenderingContext2D} ctx - The canvas rendering context.
     * @param {number} startX - The starting x-coordinate.
     * @param {number} endX - The ending x-coordinate.
     * @param {number} y - The y-coordinate (the spring's axis).
     * @param {number} coils - The number of coils.
     */
    function drawSpring(ctx, startX, endX, y, coils) {
        ctx.beginPath();
        const straightLen = 5; // Length of the straight part at each end

        // Start straight part
        ctx.moveTo(startX, y);
        ctx.lineTo(startX + straightLen, y);

        const coilTotalLen = endX - startX - 2 * straightLen;
        const coilDiameter = coilTotalLen / coils;
        let currentX = startX + straightLen;
        
        // Draw the coils (semi-circles)
        for (let i = 0; i < coils; i++) {
            // arc(x_center, y_center, radius, startAngle, endAngle)
            // Draws an upper semi-circle
            ctx.arc(currentX + coilDiameter / 2, y, coilDiameter / 2, Math.PI, 2 * Math.PI);
            currentX += coilDiameter;
        }

        // End straight part
        // The last arc command leaves the current point at the end of the coils
        ctx.lineTo(endX, y);
        ctx.stroke();
    }

    // --- General Style ---
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';

    // --- 1. Draw U-shaped Container ---
    ctx.fillStyle = '#E0E0E0'; // Light grey
    ctx.beginPath();
    ctx.moveTo(50, 150);
    ctx.lineTo(70, 150);
    ctx.lineTo(70, 280);
    ctx.lineTo(530, 280);
    ctx.lineTo(530, 150);
    ctx.lineTo(550, 150);
    ctx.lineTo(550, 300);
    ctx.lineTo(50, 300);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.fillStyle = 'black'; // Reset fillStyle

    // --- 2. Define Trolley Parameters ---
    const trolleyWidth = 120;
    const trolleyHeight = 40;
    const trolleyX = (canvas.width - trolleyWidth) / 2; // Horizontally centered
    const trolleyY = 220;
    const wheelRadius = 12;
    const wheelY = trolleyY + trolleyHeight + wheelRadius;
    const wheelX1 = trolleyX + trolleyWidth * 0.25;
    const wheelX2 = trolleyX + trolleyWidth * 0.75;

    // --- 3. Draw Trolley ---
    ctx.beginPath();
    // Body (rectangle)
    ctx.rect(trolleyX, trolleyY, trolleyWidth, trolleyHeight);
    // Wheels (circles)
    ctx.moveTo(wheelX1 + wheelRadius, wheelY); // Move to the right edge of the first wheel to start the arc path
    ctx.arc(wheelX1, wheelY, wheelRadius, 0, 2 * Math.PI);
    ctx.moveTo(wheelX2 + wheelRadius, wheelY); // Move to the right edge of the second wheel
    ctx.arc(wheelX2, wheelY, wheelRadius, 0, 2 * Math.PI);
    ctx.stroke();

    // --- 4. Draw Fixed Points and Springs ---
    const springY = trolleyY + trolleyHeight / 2;
    const pointPx = 70;
    const pointQx = 530;
    const pointRadius = 3;
    
    // Draw points P and Q (filled circles)
    ctx.beginPath();
    ctx.arc(pointPx, springY, pointRadius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(pointQx, springY, pointRadius, 0, 2 * Math.PI);
    ctx.fill();

    // Draw springs
    const numCoils = 9;
    drawSpring(ctx, pointPx, trolleyX, springY, numCoils);
    drawSpring(ctx, trolleyX + trolleyWidth, pointQx, springY, numCoils);
    
    // --- 5. Add Labels and Pointers ---
    ctx.font = '16px sans-serif';
    ctx.textAlign = 'center';

    // Label for "trolley mass 950 g"
    ctx.fillText('trolley', 300, 180);
    ctx.fillText('mass 950 g', 300, 200);
    // Pointer line for trolley
    ctx.beginPath();
    ctx.moveTo(300, 203);
    ctx.lineTo(300, trolleyY);
    ctx.stroke();
    
    // Label for "spring"
    ctx.textAlign = 'left';
    ctx.fillText('spring', 450, 160);
    // Pointer line for spring
    const springMidX_right = (trolleyX + trolleyWidth + pointQx) * 0.55;
    ctx.beginPath();
    ctx.moveTo(465, 168); 
    ctx.lineTo(springMidX_right, springY - 5);
    ctx.stroke();
    
    // Labels for points P and Q
    ctx.font = 'bold 16px sans-serif';
    ctx.textAlign = 'right';
    ctx.fillText('P', pointPx - 5, springY + 6);
    ctx.textAlign = 'left';
    ctx.fillText('Q', pointQx + 5, springY + 6);

    // --- 6. Add Caption ---
    ctx.font = 'bold 16px sans-serif';
    ctx.textAlign = 'center';
    ctx.fillText('Fig. 4.1', canvas.width / 2, 350);

</script>

</body>
</html>